Create an Editor with a Dynamic Dropdown Box

IN THIS PAGE

Create a Simple List Control
Define JSON data to Filter
Define Javascript Functions
Create Two Editors in an EditorSet
Create the Form View Control

Description

You can use an editor to create a dynamic drop down box. The dropdown box can be called by multiple fields inside a form view, such as a 'State' and a 'City' field. It can then use javascript to filter the values of the one field based on the value of the other.

Create a Simple List Control

In the UX Builder on the UX Controls page, open the 'Data Controls' menu. Click on the [List] option to add a list control to the component.
Highlight the list control in the controls tree. In the properties list on the right click on the 'List properties' property in the 'List Properties' section. The list builder will open.
On the list builder's 'Data Source' pane set the 'Data Source Type' to 'Static'.
Click the [...] button next to the 'Static data' property.
Click the 'Sample data' hyperlink in the lower left-hand corner of the 'Static Choices' dialog .
Select the 'Name and addresses' data set from among the 'Sample Data' options and click OK and OK again.
Open the 'List Layout' pane. Highlight the 'Firstname', 'Lastname', 'City', and 'State' fields in the 'Available Fields' list. Use the blue > arrow icon to move the fields to the 'Columns in List' section. Click OK to close the list builder.

Define JSON data to Filter

In the UX Builder's main menu, open the 'Events' section and then the 'Client-side' page.
In the Client-Side Events list highlight the 'onRenderComplete' event. To quickly locate this event type 'render' into the filter underneath the list.

Add the following JSON to the 'onRenderComplete' event definition.

{dialog.object}._cities = [
  {
     "City": "Boston",
     "State": "MA"
  },
  {
     "City": "Cambridge",
     "State": "MA"
  },   
  {
     "City": "New York",
     "State": "NY"
  },   
  {
     "City": "Los Angeles",
     "State": "CA"
  },   
  {
     "City": "Chicago",
     "State": "IL"
  },   
  {
     "City": "Springfield",
     "State": "IL"
  },   
  {
     "City": "Boulder",
     "State": "CO"
  },   
  {
     "City": "Ithaca",
     "State": "NY"
  }
];

Define Javascript Functions

In the UX Builders main menu open the 'Code' section and click on the 'Javascript functions' page to open it. Define a getStates() function and getCities function using the following code:
```
function getStates() {
   var _d = {dialog.object}._cities;
   var s = [];
   for(var i = 0; i < _d.length; i++) {
      if(s.indexOf(_d[i].State) < 0) {
         s.push(_d[i].State);
      }
   }

   s = s.sort();

   return s; 
};

function getCities(state) {
    var _d = {dialog.object}._cities;
    var c = [];
    for(var i = 0; i < _d.length; i++) {
       if(_d[i].State == state) {
           if(c.indexOf(_d[i].City) < 0) {
               c.push(_d[i].City);
           }
       }
    }
    c = c.sort();
    return c;

};
```
The two functions process the client-side data in this component. The getStates() function takes the data created in the client-side onInitialize event. It then loops through all of the records in the data and creates an array of unique states. In other words, if the state has already has been pushed onto the array then it isn't pushed a second time. At the end of the function this array of unique states is sorted. The array of states is then returned. The second function, getCities(), takes a 'state' as its argument. The function will then push this data onto a cities array, but only if the state for the current entry in the array matches the state value that is passed into the function.

Create Two Editors in an EditorSet

Open the UX Controls page again and open the 'Containers' menu. Click on the [Container] option.
From the 'Container Type' list select the 'EditorSet' option and click 'Insert After'.
In the controls tree, highlight the opening tag of the EditorSet container. Open the 'Defined Controls' menu and select the 'Editor-TextBox' option. An textbox editor should be added inside the EditorSet.
Highlight the ending tag for the Editor-TextBox container,"Editor End:EDITOR_1]". In the Defined Controls menu click on the 'Editor-TextBox' option a second time
In the controls tree highlight the [TextBox] control inside the second editor that you just defined.
In the properties list on the right click the [...] button next to the 'Control type' property.
In the 'Select Control Type' dialog choose 'DropDownBox' from the list and click OK.
Highlight the opening tag of the second editor container, "[Editor: EDITOR_2]"
Click the [...] button next to the "Set value in editor" property.
Add the following code to the 'Set value in editor' definition.
```
if(settings['fieldName'] == 'State') {
     var choices = getStates();
} 
else if(settings['fieldName'] == 'City') {
    var state = settings.formView.data.State;
     choices = getCities(state);
}
if(typeof choices != 'undefined') {
    {dialog.object}.populateDropdownBox('EDITOR_2_TXTBOX',choices,true);
}

{dialog.object}.setValue('EDITOR_2_TXTBOX',value);
```
If we are currently setting the value for the state field and that is equal to state then the javascript function called getStates() is called. This provides an array of choices for the dropdown box. If the City field is being populated then it is necessary to filter the list of cities based on the current value in the state field. We can get this information using 'settings.formView.data.State'. The choices are obtained from the getCities() function. Finally the dropdownbox is populated using the populateDropdownBox() function. Note that in the video example the state variable is set to 'settings.data.State'. Due to changes in Alpha Anywhere this should now 'var state = settings.formView.data.State;'.

Create the Form View Control

On the UX Controls page highlight the list control in the controls tree and open the 'Other Controls' menu. Select the [Form View] option to add a form view control under the list control.
Highlight the form view control in the controls tree. In the properties list click on the [...] button next to the 'Form properties' property.
On the Form Builder's 'Data Source' pane. Click the dropdown button next to the 'Datasource type' property. Select 'List'.
Click the [...] button next to the 'List name' property. Select the list that was defined in the first section of this guide, "list 1".
Open the fields pane. Highlight the Firstname field. In the properties list on the right click the [...] button next to the 'Editor set' property.
In the 'Editor Set' list select 'EDITORSET_1'. In the 'Editor' list select EDITOR_1, the textbox editor. Click the 'Assign selection to multiple fields' hyperlink.
Highlight the 'Firstname' and 'Lastname' fields in the 'Select Multiple Fields' dialog and click OK.
Highlight the 'City' field. Click the [...] button next to the 'Editor set' property.
Set the 'Editor Set' to be 'EDITORSET_1' and the 'Editor' to EDITOR_2. Click the 'Assign selection to multiple fields' hyperlink.
Highlight the 'City' and the 'State' fields and click OK.
Click the [...] button next to the 'User defined editor and template settings' property in the Editor Settings section.
Click the 'Add setting' property button at the bottom of the User Defined Editor and Template Settings: Field - 'City' dialog
In the Setting dialog make the 'Setting name' to read 'fieldName'. Set the 'Value' to read 'City'. Click OK and OK again.
Highlight the 'State' field in the 'Fields in Data Source' list.
Click the [...] button next to the 'User defined editor and template settings' property in the Editor Settings section.
Click the 'Add setting' button again.
Give the setting the 'Setting name' of 'fieldName'. Set the value to read 'State'. Click OK and OK again.
Open the 'Form Layout' pane. Click the 'Add item' button at the bottom of the pane.
In the 'Select Control Type' dialog highlight the 'Data Controls' option in the 'Category' list, the [Label] option in the 'Control' list, and then highlight all of the fields on the right. Click OK and OK again to close the Form View Builder.
Run the component in Live Preview. Click on the 'State' field and select a state from the dropdown.
Save the selected state. Click the 'City' field in the FormView. You should see a dropdown that only displays cities in the selected State.